<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/mobiscroll.custom-3.0.0-beta6.min.css" />
    <style>
        body {
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue" style="overflow-x: hidden;">
        <a href="javascript:;" class="addr-link aui-margin-t-10" @click="openNearby">
            <div class="addr-ple aui-margin-t-10" v-if="near.count>0">附近有<span>{{near.count}}</span>位自由快递人正在待命<i class="aui-iconfont aui-icon-right c-d"></i></div>
            <div class="addr-ple aui-margin-t-10" v-else>附近没有自由快递人</div>
            <div class="addr-ple1 aui-margin-t-10">
                <ul class="addr-ple2 aui-margin-t-10" style="padding-right:1rem;">
                    <li v-for="item in near.list"><img :src="item.avatar"></li>
                </ul>
            </div>
        </a>
        <ul class="aui-list aui-media-list aui-margin-t-15 deliv-list">
            <li class="aui-list-item" @click="setAddress(0)">
                <a href="javascript:;">
                    <div class="aui-media-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-media"> <img src="../images/fh4.png"> </div>
                        <div class="aui-list-item-inner aui-border-b bor-no" v-if="order.address0.name">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-ellipsis-1">{{order.address0.province}}{{order.address0.city}}{{order.address0.district}}{{order.address0.address}}{{order.address0.address_detail}}</div>
                            </div>
                            <div class="deliv-text2 aui-margin-t-5"><span class="aui-margin-r-15">{{order.address0.name}}</span>{{order.address0.phone}}</div>
                        </div>
                        <div class="aui-list-item-inner aui-border-b bor-no" v-else>
                            <div class="deliv-text"> 请选择发货人地址 </div>
                        </div>
                    </div>
                </a>
            </li>
            <li class="aui-list-item" tapmode @click="setAddress(1)">
                <a href="javascript:;">
                    <div class="aui-media-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-media"> <img src="../images/fh5.png"> </div>
                        <div class="aui-list-item-inner" v-if="order.address1.name">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-ellipsis-1">{{order.address1.province}}{{order.address1.city}}{{order.address1.district}}{{order.address1.address}}{{order.address1.address_detail}}</div>
                            </div>
                            <div class="deliv-text2 aui-margin-t-5"><span class="aui-margin-r-15">{{order.address1.name}}</span>{{order.address1.phone}}</div>
                        </div>
                        <div class="aui-list-item-inner bor-bn" v-else>
                            <div class="deliv-text"> 请选择收货人地址 </div>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <ul class="aui-list aui-list-in aui-margin-t-15 deliv-time bor-no">
            <li class="aui-list-item aui-list-item-arrow" @click="setGoodsTime">
                <a href="javascript:;" class="aui-list-item-inner" @click="setGoodsTime">
                    <div class="aui-list-item-title">取货时间</div>
                    <div class="aui-list-item-right c-6" id="datetimeInvalid" v-text="get_goods_time_desc"></div>
                </a>
            </li>
            <li class="aui-list-item aui-list-item-arrow">
                <a href="javascript:;" class="aui-list-item-inner bor-bn" @click="setGoodsInfo">
                    <div class="aui-list-item-title">物品信息</div>
                    <div class="aui-list-item-right">{{order.goods_type}}<span class="aui-padded-5">/</span>{{order.goods_value}}元<span class="aui-padded-5">/</span>{{order.goods_weight}}<span class="aui-padded-5">/</span>{{order.vehicle}}</div>
                </a>
            </li>
        </ul>
        <a href="javascript:;" class="deliv-price1" @click="countFeeDesc">查看计价规则</a>
        <div class="deliv-price2">
            <div v-if="!count_fee" style="height:0.6rem"></div>
            <div class="deliv-price3" v-if="count_fee"><span class="aui-margin-r-5">约{{km}}公里</span>预估费用：<span class="deliv-price4">￥{{order_fee}}<a href="javascript:;" id="pay-open" class="aui-iconfont aui-icon-question aui-margin-l-5" style="display:none;"></a></span></div>
            <div class="aui-btn aui-btn-info login-sub2 u-btn1 aui-margin-b-15" @click="subOrder">去下单</div>
        </div>
    </div>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript" src="../script/picker.min.js"></script>
    <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        apiready = function() {

            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#eee',
                textColor: '#333',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                init(function() {
                    api.refreshHeaderLoadDone();
                });
            });

            app.addEventListener('getAddressValue', function(ret, err) {
                // console.log(JSON.stringify(ret.value.address))
                if (ret.value.type == 0) {
                    vObj.order.address0 = ret.value.address;
                } else {
                    vObj.order.address1 = ret.value.address;
                }
            });

            var date = new Date();
            vObj = new Vue({
                el: ".vue",
                data: {
                    near: {
                        count: 0,
                        list: []
                    },
                    location: {
                        lon: 0,
                        lat: 0
                    },
                    km: 0,
                    order_fee: '0.00',
                    count_fee: false,
                    get_goods_time_desc: '立即取货',
                    order: { //待提交订单字段
                        address0: {},
                        address1: {},
                        goods_weight: '1公斤',
                        get_goods_time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':00:00',
                        goods_type: '物品类型',
                        goods_value: '100',
                        goods_pics: [],
                        goods_pics2: [],
                        vehicle: '不限'
                    }
                },
                methods: {
                    openNearby: function() {
                        app.page({
                            name: 'nearby',
                            url: 'nearby.html',
                            pageParam: {
                                near: this.near.list,
                                location: this.location
                            }
                        });
                    },
                    setAddress: function(type) {
                        app.page({
                            name: "address",
                            url: "address.html",
                            bounces: false,
                            pageParam: {
                                type: type,
                                ret: api.pageParam.ret
                            }
                        })
                    },
                    setGoodsTime: function() {
                        api.setFrameAttr({
                            name: 'main_city1',
                            bounces: false
                        });
                        picker.show();
                    },
                    setGoodsInfo: function() {
                        //确定选择物品信息监听
                        app.addEventListener('confirmGoodsInfoListen', function(ret, err) {
                            //监听返回结果后结束监听
                            app.removeEventListener('confirmGoodsInfoListen');
                            vObj.order = $.extend(vObj.order, ret.value);
                        });
                        app.page({
                            name: "goods_info",
                            url: "goods_info.html",
                            bounces: false,
                            pageParam: {
                                order: vObj.order,
                                vehicle: 1
                            }
                        })
                    },
                    countFeeDesc: function() {
                        api.showProgress({
                            title: '正在读取',
                            text: '请稍候...',
                            modal: true
                        });
                        api.openFrame({
                            name: 'count_fee_desc',
                            url: app.app_host + 'Common/articleDetail?close=1&id=9',
                            rect: {
                                x: 0,
                                y: api.pageParam.statusBarPos.h + api.pageParam.headerPos.h,
                                w: 'auto',
                                h: 'auto'
                            },
                            bgColor: '#eee',
                            bounces: true,
                            animation: {
                                type: 'push',
                                subType: 'from_bottom'
                            }
                        });
                        api.hideProgress();
                    },
                    subOrder: function() {
                        if (!vObj.order.address0.name) {
                            app.error("请选择发货人地址！");
                            return;
                        } else if (!vObj.order.address1.name) {
                            app.error("请选择收货人地址！");
                            return;
                        } else if (vObj.order.goods_type == '物品类型') {
                            app.error("请填写物品信息！");
                            return;
                        }
                        api.showProgress({
                            title: '正在提交',
                            text: '请稍候...',
                            modal: false
                        });
                        app.request.postArray('Client/newCityOrder', vObj.order, {}, function(res) {
                            if (res.code == 200) {
                                app.page({
                                    name: "confirm_order",
                                    url: "confirm_order.html",
                                    bounces: false,
                                    delay: 100,
                                    reload: true,
                                    pageParam: {
                                        order_id: res.data.order_id
                                    }
                                })
                            } else {
                                app.error(res.message);
                            }
                            api.hideProgress();
                        })
                    }
                },
                watch: {
                    order: {
                        handler: function(val, oldVal) {
                            //计算费用
                            if (val.address0.name && val.address1.name && val.goods_weight != '' && val.get_goods_time != '') {
                                api.showProgress({
                                    title: '正在计算价格',
                                    text: '请稍候...',
                                    modal: false
                                });
                                app.request.postArray('Client/countFee', val, {}, function(res) {
                                    if (res.code == 200) {
                                        vObj.km = res.data.km;
                                        vObj.order_fee = res.data.order_fee;
                                        vObj.count_fee = true;
                                    } else {
                                        vObj.km = 0;
                                        vObj.order_fee = '0.00';
                                        vObj.count_fee = false;
                                        app.error(res.message);
                                    }
                                    api.hideProgress();
                                });
                            }
                        },
                        deep: true
                    }
                }
            })

            init();

            function init(callback) {
                app.lbs.init(function() {
                    app.lbs.getLocation(function(lon, lat) {
                        vObj.location = {
                                lon: lon,
                                lat: lat
                            }
                            // console.log(JSON.stringify(vObj.location))
                        app.request.post('Client/nearbyDriver', {
                            lng: lon,
                            lat: lat
                        }, {}, function(res) {
                            // console.log(JSON.stringify(res))
                            if (res.code == 200) {
                                vObj.near = res.data;
                                app.request.finish(vObj);
                            } else {
                                app.error(res.message);
                            }
                        });
                    });
                });

                callback && callback();
            }

            //设置取货时间START
            function timeCover(value) {
                return (Array(2).join(0) + value).slice(-2)
            }
            var day = [{
                text: '今天',
                value: '今天'
            }, {
                text: '明天',
                value: '明天'
            }, {
                text: '后天',
                value: '后天'
            }];
            var hour = [],
                minute = [],
                nowHour = date.getHours(),
                todayHour = [{
                    text: '立即取货',
                    value: timeCover(nowHour)
                }];
            for (var i = nowHour + 1; i < 24; i++) {
                todayHour.push({
                    text: i + '点',
                    value: timeCover(i)
                });
            }
            for (var i = 0; i < 24; i++) {
                hour.push({
                    text: i + '点',
                    value: timeCover(i)
                });
            }
            for (var i = 0; i < 60; i++) {
                minute.push({
                    text: i + '分',
                    value: timeCover(i)
                });
            }

            var picker = new Picker({
                data: [day, todayHour, []],
                selectedIndex: [0, 0, 0],
                title: '取货时间'
            });

            picker.on('picker.select', function(selectedVal, selectedIndex) {
                api.setFrameAttr({
                    name: 'main_city1',
                    bounces: true
                });
                switch (selectedVal[0]) {
                    case '今天':
                        if (selectedVal[1] == timeCover(nowHour)) {
                            vObj.get_goods_time_desc = '立即取货';
                        } else {
                            vObj.get_goods_time_desc = (timeCover(date.getMonth() + 1)) + '-' + timeCover(date.getDate()) + ' ' + selectedVal[1] + ':00';
                        }
                        vObj.order.get_goods_time = date.getFullYear() + '-' + (timeCover(date.getMonth() + 1)) + '-' + timeCover(date.getDate()) + ' ' + selectedVal[1] + ':00:00';
                        break;
                    case '明天':
                        vObj.get_goods_time_desc = (timeCover(date.getMonth() + 1)) + '-' + timeCover(date.getDate() + 1) + ' ' + selectedVal[1] + ':' + selectedVal[2];
                        vObj.order.get_goods_time = date.getFullYear() + '-' + vObj.get_goods_time_desc + ':00';
                        break;
                    case '后天':
                        vObj.get_goods_time_desc = (timeCover(date.getMonth() + 1)) + '-' + timeCover(date.getDate() + 2) + ' ' + selectedVal[1] + ':' + selectedVal[2];
                        vObj.order.get_goods_time = date.getFullYear() + '-' + vObj.get_goods_time_desc + ':00';
                        break;
                }
            });

            picker.on('picker.change', function(index, selectedIndex) {
                if (index == 0) {
                    if (selectedIndex == 0) {
                        picker.refillColumn(1, todayHour);
                        picker.refillColumn(2, []);
                    } else {
                        picker.refillColumn(1, hour);
                        picker.scrollColumn(1, 0);
                        picker.refillColumn(2, minute);
                        picker.scrollColumn(2, 0);
                    }
                }
            });

            picker.on('picker.cancel', function() {
                api.setFrameAttr({
                    name: 'main_city1',
                    bounces: true
                });
            });
            //设置取货时间END

        }
    </script>
</body>

</html>
